<template>
  <div class="rich">
    <div ref="richText" style="height: 400px; background-color: #fff"></div>
  </div>
</template>

<script lang="ts" setup>
import { ref, onMounted, defineEmits,defineProps, onUnmounted, onBeforeUnmount } from "vue";
import E from "wangeditor";
const phoneEditor = ref("");
const richText = ref();

const emit = defineEmits(["richTextData"]);

const props = defineProps({
  editText: {
    type: String,
    default: "",
  },
});
onMounted(() => {
  phoneEditor.value = new E(richText.value);
  // 创建一个富文本编辑器
  phoneEditor.value.create();
  // 富文本内容
  // phoneEditor.value.txt.html();
  // 设置内容变化事件
  phoneEditor.value.config.zIndex = 1;
  // 设置placeholder
  phoneEditor.value.config.onchange = (newHtml) => {
    emit("richTextData", newHtml);
  };
  
  phoneEditor.value.txt.html(`${props.editText}`);
});
onBeforeUnmount(() => {
   phoneEditor.value.destroy()
})
</script>

<style scoped>
</style>

